import React, {useState} from "react"
import Taro, {getUserInfo} from '@tarojs/taro'
import {View, Input, Text, Button} from "@tarojs/components"
import {register, requestUserInfo, updateUserInfo} from '@/services/user'
import Loading, {useLoading} from '@/components/Loading/Loading'
import './Index.scss'

/**
 * 文本输入
 */
const useInput = () => {
  const [nickname, setNickName] = useState('')
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [confirmPass, setConfirmPass] = useState('')
  const [phone, setPhone] = useState('')
  const [address, setAddress] = useState('')

  function onChangeNickname (e) {
    setNickName(e.detail.value)
  }

  function onChangeUsername (e) {
    setUsername(e.detail.value)
  }

  function onChangePassword (e) {
    setPassword(e.detail.value)
  }

  function onChangeConfirmPass (e) {
    setConfirmPass(e.detail.value)
  }

  function onChangePhone (e) {
    setPhone(e.detail.value)
  }

  function onChangeAddress (e) {
    setAddress(e.detail.value)
  }

  return {
    nickname, username, password, confirmPass,
    phone, address, onChangeNickname, onChangeConfirmPass,
    onChangePhone, onChangeAddress,
    onChangeUsername, onChangePassword
  }
}

const Register: React.FC = () => {

  const {
    nickname, username, password, confirmPass,
    phone, address, onChangeNickname, onChangeConfirmPass,
    onChangePhone, onChangeAddress,
    onChangePassword, onChangeUsername
  } = useInput()

  const {show, showLoading, hideLoading} = useLoading()


  async function onRegister () {
    if (nickname.length === 0 || nickname.length >= 6) {
      await Taro.showToast({
        title: '昵称不能为空或大于6',
        icon: 'none'
      })
      return
    }
    if (username.length === 0) {
      await Taro.showToast({
        title: '账号信息不能为空，请重新输入',
        icon: 'none'
      })
      return
    }
    if (password.length === 0) {
      await Taro.showToast({
        title: '密码不能为空，请重新输入',
        icon: 'none'
      })
      return
    }
    if (password !== confirmPass) {
      await Taro.showToast({
        title: '两次输入密码不相同，请重新输入',
        icon: 'none'
      })
      return
    }

    if (password !== confirmPass) {
      await Taro.showToast({
        title: '两次输入密码不相同，请重新输入',
        icon: 'none'
      })
      return
    }
    if (!/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(phone)) {
      await Taro.showToast({
        title: '电话号码不合法，请重新输入',
        icon: 'none'
      })
      return
    }
    if (address.length === 0) {
      await Taro.showToast({
        title: '输入地址为空，请重新输入',
        icon: 'none'
      })
      return
    }
    showLoading()
    let userInfo = Taro.getStorageSync('userInfo')
    if (!userInfo.avatarUrl) {
      userInfo = await getUserInfo()
    }
    let token = await register(username, password, nickname, phone, address)
    if (!token) {
      await Taro.showToast({
        title: '注册失败，请稍后重试',
        icon: 'none'
      })
    }
    console.log(token)
    Taro.setStorageSync('isLogin', true)
    Taro.setStorageSync('token', token)
    hideLoading()
    await Taro.showToast({
      title: '注册成功，正在跳转'
    })
    await updateUserInfo(userInfo)
    userInfo = await requestUserInfo()
    Taro.setStorageSync('userInfo', userInfo)
    await Taro.navigateBack({
      delta: 1
    })
  }

  return <View className='container'>
    <View className='login'>
      <View className='login_title'>注册</View>
      <Input className='input' type='text' placeholder='昵称' value={nickname} onInput={onChangeNickname} />
      <Input className='input' type='text' placeholder='账号' value={username} onInput={onChangeUsername} />
      <Input className='input' type='text' password placeholder='密码' value={password} onInput={onChangePassword} />
      <Input className='input' type='text' password placeholder='确定密码' value={confirmPass}
        onInput={onChangeConfirmPass}
      />
      <Input className='input' type='text' placeholder='手机号' value={phone} onInput={onChangePhone} />
      <Input className='input' type='text' placeholder='地址' value={address} onInput={onChangeAddress} />
    </View>
    <View className='bottom_wrap'>
      <View className='bg_pre' />
      <Button className='login_btn' onClick={onRegister}><Text className='iconfont'>&#xe621;</Text></Button>
      <View className='bg_next' />
    </View>
    <Loading showLoading={show} color='#fff' show={show} />
  </View>
}

export default Register
